<template>
  <a-spin :spinning="_d.loading">
  	<div class="feedback-detail">
  		<a-descriptions :column="1" bordered :labelStyle="{width: '90px', padding: '16px'}">
		    <a-descriptions-item label="标题">{{props.data.title}}</a-descriptions-item>
		    <a-descriptions-item label="联系电话">{{props.data.tel}}</a-descriptions-item>
		    <a-descriptions-item label="反馈描述">{{props.data.content}}</a-descriptions-item>
		    <a-descriptions-item label="图片">
		    	<div v-if="props.data.image" class="img-box" :style="{backgroundImage: `url(${props.data.image})`}">
		    		<div class="img-mark">
		    			<div class="btn" @click="showImage()">
		    				<eye-outlined />
		    				<span>预览</span>
		    			</div>
		    		</div>		
		    	</div>
		    	<div v-else class="no-tip">未上传图片</div>
		    </a-descriptions-item>
		  </a-descriptions>
  	</div>
	  <a-image :style="{ display: 'none' }"
	    :preview="{
	    	visible: _d.preview.visible,
	      onVisibleChange: _d.preview.onVisibleChange
	    }"
	    :src="_d.preview.src"/>
  </a-spin>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { EyeOutlined } from '@ant-design/icons-vue';


	const props = defineProps({
		data: {
			type: Object
		},
	})

	const _d = reactive({
		loading: false,

		preview: {
			visible: false,
			src: '',
			onVisibleChange (value) {
				_d.preview.visible = value;
			}
		}
	})

	function showImage() {
		_d.preview.src = props.data.image;
		_d.preview.visible = true;
	}

</script>

<style lang="less" scoped>
.feedback-detail {
	.no-tip {
		color: #bbb;
	}

	.img-box {
		width: 200px;
		height: 200px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		&:hover .img-mark {
			opacity: 1;
		}
		.img-mark {
			opacity: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.5);
			transition: all .3s;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				cursor: pointer;
			}
		}
	}
}
</style>
<style lang="less">
.ant-image-preview-root {
	.ant-image-preview-mask {
		z-index: 30000;
	}
	.ant-image-preview-wrap {
		z-index: 30001;
	}
}
</style>
